<template>
  <div class="line" ref="lineRef" :style="{ height }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { graphic } from "echarts"
import { nextTick, watch, ref } from "vue"

const props = defineProps({
  height: {
    type: String,
    default: "350px",
  },
  data: {
    type: [Array, Object],
    default: () => [],
  },
})
const graphicFactory = (side: any) => {
  return {
    type: "text",
    bottom: "8",
    ...side,
    style: {
      text: "",
      textAlign: "center",
      fill: "#4E5969",
      fontSize: 12,
    },
  }
}
const graphicElements = ref([
  graphicFactory({ left: "5%" }),
  graphicFactory({ right: 0 }),
])

const xAxis = ref([])
watch(
  () => props.data,
  (data: any) => {
    xAxis.value = data.length ? data[0]["chartDate"] : []
  },
  {
    deep: true,
    immediate: true,
  },
)

const fmtSeriesItem = (item: any) => {
  item.color = item.color || "#46BEFF"
  return {
    name: item.title,
    color: item.color,
    data: item.chartValue.map(Number),
    type: "line",
    smooth: true,
    emphasis: {
      focus: "series",
      itemStyle: {
        borderWidth: 2,
      },
    },
    lineStyle: {
      width: 2,
      color: new graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: `${item.color}80`,
        },
        {
          offset: 0.5,
          color: `${item.color}92`,
        },
        {
          offset: 1,
          color: `${item.color}FF`,
        },
      ]),
    },
    symbolSize: 10,
    symbol: "circle",
    showSymbol: true,
    itemStyle: {
      color: item.color, // 设置圆点的颜色
      borderColor: "#ffffff", // 设置圆点的边框颜色
      borderWidth: 2, // 设置圆点的边框宽度
    },
    areaStyle: {
      opacity: 0.8,
      color: new graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: `${item.color}20`,
        },
        {
          offset: 1,
          color: `${item.color}08`,
        },
      ]),
    },
  }
}

const dotColor = ref("#E5ECF7")
const lineRef = ref()
nextTick(() => {
  let myChart = echarts.init(lineRef.value)

  let option = {
    grid: {
      left: "40",
      right: "40",
      top: "10",
      bottom: "30",
    },
    xAxis: {
      type: "category",
      offset: 2,
      data: xAxis.value,
      boundaryGap: false,
      axisLabel: {
        fontSize: 10,
        color: "#4E5969",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        // show: true,
        show: false,
        interval: (idx: number) => {
          if (idx === 0) return false
          if (idx === xAxis.value.length - 1) return false
          return true
        },
        lineStyle: {
          color: dotColor.value,
        },
      },
      axisPointer: {
        show: true,
        lineStyle: {
          type: "solid",
          color: dotColor.value,
          width: 1,
        },
      },
    },
    yAxis: {
      type: "value",
      name: "消耗(GB)",
      axisLine: {
        show: false,
      },
      axisLabel: {
        fontSize: 10,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: dotColor.value,
        },
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#0B1F3D", // 设置提示框背景颜色为黑色
      borderRadius: 5,
      padding: [8, 12],
      formatter: function (params: any[]) {
        let tooltipHtml = ""
        params.forEach((param) => {
          tooltipHtml += `<div class="text-xs !leading-snug text-white">${param.seriesName}：${param.value}</div>`
        })
        return tooltipHtml
      },
    },
    graphic: {
      elements: graphicElements.value,
    },
    series: props.data
      .filter((item: any) => item.active)
      .map((item: any) => fmtSeriesItem(item)),
  }
  window.addEventListener("resize", () => {
    myChart.resize()
  })
  option && myChart.setOption(option)

  console.log(option)
})
</script>

<style scoped></style>
